import React, { useEffect, useState } from 'react';
import {
  Form,
  Row,
  Col,
  Button,
  Table,
  Select,
  DatePicker,
  Input,
  message,
} from 'antd';
import { history } from 'umi';
import request from '@/http';
import { Homework } from '@/pages/login/service';

export default () => {
  const [formObject] = Form.useForm();
  const [loading, setLoading] = useState(true);

  const [pagination, setPagination] = useState({
    current: 1,
    total: 5,
    pageSize: 3,
    showSizeChanger: true,
    pageSizeOptions: ['3', '5', '10', '20'],
    showQuickJumper: true,
  });

  const [courseSource, setCourseSource] = useState();

  const loadDataSource = async (
    userParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    try {
      //const formObjects = await formObject.getFieldsValue();
      const data = await request.post(
        '/api/teacher/Operation/QueryHomework',
        {
          completeDate: '',
          completeTime: '',
          courseName: '',
          createTime: '',
          current: 0,
          size: 0,
          studentName: '',
          teaName: '',
          teamName: '',
          title: '',
          types: '',
          workType: '',
        },
        { headers: { 'Content-Type': 'application/json' } },
      );
      if (data.data.info.length !== 0) {
        const result: any = await data.data.info.map((user: any) => ({
          key: user.id,
          id: user.id,
          collegesName: user.collegesName,
          completeDate: user.completeDate,
          completeTime: user.completeTime,
          courseName: user.courseName,
          createTime: user.createTime,
          majorName: user.majorName,
          studentName: user.studentName,
          studentNumber: user.studentNumber,
          teacherName: user.teacherName,
          teamName: user.teamName,
          title: user.title,
          workType: user.workType,
        }));
        setLoading(false);
        setCourseSource(result);
      }
      const newPageObject = {
        ...pagination,
        current: pageValue,
        pageSize: pageSizeValue,
        total: data.data.info,
      };
      setPagination(newPageObject);
    } catch (e) {
      message.error('数据错误');
    }
  };

  const [courseName, setCourseName] = useState();

  const [teamName, setTeamName] = useState();

  const [teacherName, setTeacherName] = useState();

  const selectData = async () => {
    const dataCourseName = await request.post(
      '/api/common_module/a_t_s/getCourse',
    );
    console.log(dataCourseName.data);
    setCourseName(dataCourseName.data);

    const dataTeamName = await request.post('/api/common_module/a_t_s/getTeam');
    setTeamName(dataTeamName.data);

    const dataTeacherName = await request.post(
      '/api/common_module/a_t_s/getTeacher',
    );
    setTeacherName(dataTeacherName.data);
  };

  useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize).finally();
    selectData();
  }, []);

  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  //详情跳转对应页面
  /* const skipPage = (rows: any) => {
    localStorage.setItem('shipPage', rows);
    history.push('/global/homework/details');
  };*/

  const columns = [
    {
      title: '提交时间',
      dataIndex: 'completeTime',
      key: 'completeTime',
    },
    {
      title: '项目名称',
      dataIndex: 'courseName',
      key: 'courseName',
    },
    {
      title: '作业主题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '作业类型',
      key: 'workType',
      dataIndex: 'workType',
    },
    {
      title: '实训老师',
      key: 'teacherName',
      dataIndex: 'teacherName',
    },
    {
      title: '发布时间',
      key: 'createTime',
      dataIndex: 'createTime',
    },
    {
      title: '计划完成时间',
      key: 'completeDate',
      dataIndex: 'completeDate',
    },
    {
      title: '院系',
      dataIndex: 'collegesName',
      key: 'collegesName',
    },
    {
      title: '专业',
      dataIndex: 'majorName',
      key: 'majorName',
    },
    {
      title: '小组',
      dataIndex: 'teamName',
      key: 'teamName',
    },
    {
      title: '学号',
      dataIndex: 'studentNumber',
      key: 'studentNumber',
    },
    {
      title: '姓名',
      dataIndex: 'studentName',
      key: 'studentName',
    },
    {
      title: '操作',
      key: 'action',
      render: (row: any) => (
        <Button
          type="link"
          onClick={() => {
            Homework.saveHomeworkIds({ id: row.id, state: 0 });
            history.push('/global/homework/details');
          }}
        >
          批复
        </Button>
      ),
    },
  ];

  const selectReply = async () => {
    const dataFormObject = await formObject.getFieldsValue();
    const result: any = await request.post(
      '/teacher/Operation/QueryHomework',
      {
        createTime: dataFormObject.createTime
          ? dataFormObject.createTime.format('YYYY-MM-DD HH:mm')
          : '',
        size: 0,
        current: 0,
        completeTime: dataFormObject.completeTime
          ? dataFormObject.completeTime.format('YYYY-MM-DD HH:mm')
          : '',
        completeDate: dataFormObject.completeDate
          ? dataFormObject.completeDate.format('YYYY-MM-DD HH:mm')
          : '',
        courseName: dataFormObject.courseName,
        title: dataFormObject.title,
        studentName: dataFormObject.studentName,
        teamName: dataFormObject.teamName,
        workType: dataFormObject.workType,
        teaName: dataFormObject.teaName
          ? dataFormObject.teaName.toString()
          : '',
        types: '',
      },
      { headers: { 'Content-Type': 'application/json' } },
    );
    if (result.success == 'true') {
      setCourseSource(result.data.info);
    } else {
      setCourseSource(result.data.info);
    }
    //console.log(result.data);
  };

  /*重置搜索框*/
  const resetReply = () => {
    formObject.resetFields();
    loadDataSource(null, 1, pagination.pageSize);
  };

  const formItemLayout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 24,
    },
  };

  return (
    <>
      <Form form={formObject} {...formItemLayout}>
        <Row gutter={24} wrap={false} style={{ width: '100%' }}>
          <Col span={6}>
            <Form.Item name="completeTime" label="提交时间">
              <DatePicker
                style={{ width: '100%' }}
                placeholder="请选择查询日期"
                showTime={{ format: 'HH:mm' }}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="title" label="作业主题">
              <Input placeholder="请输入..." />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="courseName" label="课程名称">
              <Select style={{ width: '100%' }} placeholder="请选择">
                {(courseName || []).map((courseName: any) => {
                  return (
                    <option
                      key={courseName.courseId}
                      value={courseName.courseId}
                    >
                      {courseName.courseName}
                    </option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="createTime" label="发布时间">
              <DatePicker
                style={{ width: '100%' }}
                placeholder="请选择查询日期"
                showTime={{ format: 'HH:mm' }}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24} wrap={false} style={{ width: '100%' }}>
          <Col span={6}>
            <Form.Item name="teamName" label="小组">
              <Select style={{ width: '100%' }} placeholder="请选择">
                {(teamName || []).map((teamName: any) => {
                  return (
                    <option key={teamName.teamId} value={teamName.teamName}>
                      {teamName.teamName}
                    </option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="completeDate" label="计划完成时间">
              <DatePicker
                style={{ width: '100%' }}
                placeholder="请选择查询日期"
                showTime={{ format: 'HH:mm' }}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="teaName" label="实训老师">
              <Select
                style={{ width: '100%' }}
                placeholder="请选择"
                mode="tags"
              >
                {(teacherName || []).map((teacherName: any) => {
                  return (
                    <option
                      key={teacherName.teacherId}
                      value={teacherName.teacherName}
                    >
                      {teacherName.teacherName}
                    </option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="studentName" label="学生姓名">
              <Input placeholder="请输入..." />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item name="workType" label="作业类型">
              <Select style={{ width: '96%' }} placeholder="请选择">
                <option key="0" value="0">
                  平时作业
                </option>
                <option key="1" value="1">
                  阶段性作业
                </option>
                <option key="2" value="2">
                  最终交互作业
                </option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Button type="primary" onClick={selectReply}>
              查询
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={resetReply}>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      <Table
        columns={columns}
        loading={loading}
        dataSource={courseSource}
        scroll={{ x: 1500 }}
        pagination={pagination}
        onChange={pageOnChange}
      />
    </>
  );
};
